import React, { useState } from 'react'

function State() {
  const [count, setCount] = useState(0)
  const [goods, setGoods] = useState(['apple', 'banana', 'pear'])

  const [user, setUser] = useState({ name: 'zs', age: 13 })
  const { name, age } = user

  function addGoods() {
    setGoods(goods => {
      let newGoods = JSON.parse(JSON.stringify(goods))
      newGoods.push('orange')
      return newGoods

      // 下面这种写法不生效（注意）
      // goods.push('orange')
      // return goods
    })
  }

  return (
    <div>
      <h2>基本类型：Count</h2>
      <p>点击:{count}</p>
      <button onClick={() => setCount(count + 1)}>点击</button>

      <h2>数组：Goods</h2>
      <ul>
        {goods.map((good, index) => {
          return <li key={index}>{good}</li>
        })}
      </ul>
      <button onClick={addGoods}>增加goods</button>

      <h2>对象</h2>
      <p>
        点击次数{name}--{age}
      </p>
      <button onClick={() => setUser({ name: 'ls', age: 23 })}>点击</button>
    </div>
  )
}

export default State
